<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<base href="<{$B_Url}>" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>在线客服系统</title> 
    <link rel="stylesheet" href="__PUBLIC__/index/css/kf.css" />
    <script type="text/javascript" src="__PUBLIC__/bootstrap/js/jquery.min.js"></script> 
    <script type="text/javascript" src="__PUBLIC__/index/js/jquery.form.js" ></script>
</head>
<body> 

<div id="bd">
	<div class="headbox">
		<div class="head">
			<h1>异度空间~客服系统</h1>
			<span><b>Nicky@wxzjit</b><a href="javascript:void(0)">退出</a></span>
		</div>
	</div>
	<input type="hidden" id="myheadimg" name="myheadimg" value="<{$APP_IMG_Url}>p1.jpg" />
	<table id="box" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="3" class="t_head1"><h2> 异度空间~客服系统 By Nicky</h2></td>
		</tr>
		<tr>
			<td class="ulist">
				<h4>接入用户列表</h4>
				<dl id="ulistbox">
					<!--
					<dd openid="">
						<span style="background-image: url(<{$APP_IMG_Url}>p3.jpg)"></span>
						<b>追梦人</b>
						<u>5</u>
					</dd>
					-->
					<dd><center>Loadding...</center></dd>
				</dl>
			</td>
			<td width="500px">
				<table class="logbox" cellpadding="0" cellspacing="0">
					<tr>
						<td colspan="2" class="logtitle"><h3>正在与【<font id="talkTo">***</font>】对话中...</h3></td>
					</tr>
					<tr>
						<td colspan="2" class="talklist_box">
							<div>
							<dl id="talklistbox">
								<!--
								<dd class="l_me">
									<em style="background-image: url(<{$APP_IMG_Url}>p1.jpg)"></em>
									<p>你好，在吗</p>
								</dd>
								<dd class="l_you">
									<em style="background-image: url(<{$APP_IMG_Url}>p2.jpg)"></em>
									<p>你好，在的，请问有什么可以帮你的</p>
								</dd>
								-->
							</dl>
							</div>
						</td>
					</tr>
					<tr class="sendbox">
						<td>
							<input type="hidden" id="openid" name="openid" />
							<textarea id="content" name="content" class="text" placeholder="信息编辑框"></textarea>
						</td>
						<td class="btn">
							<button id="mesSendBtn">发送</button>
						</td>
					</tr>
				</table>
			</td>
			<td class="uinfo">
				<h4>用户详细信息</h4>
				<div id="userinfo">
					<center>
						<em style="background-image: url(/Public/index/image/wx.png)"></em>
						<h2>######</h2>
					</center>
					<p></p>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="3" class="copyright">
				2016-12-12 
			</td>
		</tr>
	</table>
</div>

</body>
<script language="javascript">
var isGetUserBack = true;
function getUserlist(){
	isGetUserBack = false;
	var url = '/index.php/Kefu/getkf_list';
	$.getJSON(url,function(obj){
		$('#ulistbox').empty();
		var html = '';
		$.each(obj.d,function(i,d){
			html += '<dd openid="'+d.openid+'" nickname="'+d.nickname+'"><span style="background-image: url('+d.headimgurl+')"></span><b>'+d.nickname+'</b></dd>';
		});
		$('#ulistbox').html(html);
		InitUserClick();
		isGetUserBack = true;
	});
}	

function timer_getUserList(){
	getUserlist();
	/* 
	setInterval(function(){
		if(isGetUserBack){
			getUserlist();
		}
	},3000);
	*/
}

function loadMesLog(){
	var openid = $('#openid').val();
	var url = '/index.php/Kefu/getkf_mes/openid/'+openid;
	$.getJSON(url,function(obj){
		if(obj.s && obj.d){
			var html = '';
			$.each(obj.d,function(i,d){
				var className = d.opercode == 2003 ? 'l_you':'l_me';
				var image = d.opercode == 2003 ? $('#userinfo em').attr('headimgurl') : $('#myheadimg').val();
				html += '<dd class="'+className+'"><em style="background-image: url('+image+')"></em><p>'+d.text+'</p></dd>';
			});
			$('#talklistbox').html(html);
		}
	});
}

function sendMes(openid,content){
	var url = '/index.php/Kefu/sendkf_mes/openid/'+openid+'/content/'+content;
	$.getJSON(url,function(obj){
		console.log(obj);
	});
}

function InitUserClick(){
	$('#ulistbox dd').unbind('click').click(function(){
		var openid = $(this).attr('openid');
		$('#openid').val(openid);
		$('#talkTo').text($(this).attr('nickname'));
		getUserInfo(function(){
			loadMesLog();
		});
	});
}


function getUserInfo(fn){
	var openid = $('#openid').val();
	if(openid.length>0){
		var url = '/index.php/Kefu/getUserInfo/openid/'+openid;
		$.getJSON(url,function(obj){
			if(obj.d){
				$('#userinfo em').css('background-image','url("'+obj.d.headimgurl+'")');
				$('#userinfo em').attr('headimgurl',obj.d.headimgurl).attr('openid',obj.d.openid).attr('nickname',obj.d.nickname);
				$('#userinfo h2').text(obj.d.nickname);
				$('#userinfo p').html( //'<label>openid</label>'+obj.d.openid+'<br />'
						'<label>sex</label>'+obj.d.sex+'<br />'
						+'<label>language</label>'+obj.d.language+'<br />'
						+'<label>country</label>'+obj.d.country+'<br />'
						+'<label>province</label>'+obj.d.province+'<br />'
						+'<label>city</label>'+obj.d.city+'<br />'
						+'<label>subscribe</label>'+obj.d.subscribe+'<br />'
						+'<label>subscribe_time</label>'+obj.d.subscribe_time+'<br />');
			}
			fn();
		});
	}
}

$(function(){
	timer_getUserList();
	
	$('#mesSendBtn').click(function(){
		var openid = $('#openid').val();
		var content = $('#content').val();
		if(openid.length>0 && content.length>0){
			sendMes(openid,content);
		}
		return false;
	});
	
});

</script>
</html>